import React, { forwardRef, useMemo, useState } from 'react';
import {
    View,
    Text,
    TextInput as RNTextInput,
    TextInputProps,
    StyleSheet,
    ViewStyle,
    TextStyle,
    TouchableOpacity,
} from 'react-native';

export type TextFieldProps = Omit<TextInputProps, 'style'> & {
    containerStyle?: ViewStyle;
    inputStyle?: TextStyle;
    error?: boolean | string;
    label?: string;
    showToggleForPassword?: boolean; // 仅在 secureTextEntry 时显示“显示/隐藏”
};

const TextField = forwardRef<RNTextInput, TextFieldProps>((props, ref) => {
    const {
        containerStyle,
        inputStyle,
        error,
        label,
        secureTextEntry,
        showToggleForPassword = false,
        ...rest
    } = props;

    const [isSecure, setIsSecure] = useState<boolean>(!!secureTextEntry);
    const hasError = !!error;
    const errorText = typeof error === 'string' ? error : undefined;

    const containerStyles = useMemo(
        () => [
            styles.container,
            hasError && styles.containerError,
            containerStyle,
        ],
        [containerStyle, hasError]
    );

    const useContainer = !!label || !!errorText || !!containerStyle || (secureTextEntry && showToggleForPassword);

    if (!useContainer) {
        return (
            <RNTextInput
                ref={ref}
                {...rest}
                secureTextEntry={isSecure}
                style={inputStyle}
            />
        );
    }

    return (
        <View style={{ width: '100%' }}>
            {label ? <Text style={styles.label}>{label}</Text> : null}
            <View style={containerStyles}>
                <RNTextInput
                    ref={ref}
                    {...rest}
                    secureTextEntry={isSecure}
                    style={[styles.input, inputStyle]}
                />
                {secureTextEntry && showToggleForPassword ? (
                    <TouchableOpacity
                        accessibilityRole="button"
                        onPress={() => setIsSecure(s => !s)}
                        style={styles.rightAction}
                    >
                        <Text style={styles.toggleText}>{isSecure ? '显示' : '隐藏'}</Text>
                    </TouchableOpacity>
                ) : null}
            </View>
            {errorText ? <Text style={styles.errorText}>{errorText}</Text> : null}
        </View>
    );
});

TextField.displayName = 'TextField';

const styles = StyleSheet.create({
    container: {
        width: '100%',
        minHeight: 48,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#DADCE0',
        paddingHorizontal: 12,
        backgroundColor: '#FFF',
        flexDirection: 'row',
        alignItems: 'center',
    },
    containerError: {
        borderColor: '#E53935',
    },
    input: {
        flex: 1,
        color: '#202124',
        fontSize: 16,
        paddingVertical: 10,
    },
    rightAction: {
        marginLeft: 8,
        paddingVertical: 6,
        paddingHorizontal: 4,
    },
    toggleText: {
        color: '#1A73E8',
        fontSize: 14,
    },
    label: {
        marginBottom: 6,
        color: '#5F6368',
        fontSize: 14,
    },
    errorText: {
        marginTop: 6,
        color: '#E53935',
        fontSize: 12,
    },
});

export default TextField;